import './style.less'
import { useState, useEffect, useRef } from 'react'
import { px2rem } from '../util/Utils'
let timer
function Tooltips(props){
    let {content} = props
    let [visible, setVisible] = useState('fadeOut')
    let [show, setShow] = useState('hide')
    let ref = useRef(null)
    let reff = useRef(null)
    let [topVal, setTop] = useState(0)
    let [topVall, setTopp] = useState(0)
    useEffect(() => {
        clearTimeout(timer)
        if(visible === 'fadeIn'){
            setShow('show')
        }else{
            timer = setTimeout(()=>{
                // setShow('hide')
            },400)
        }
        return () => {};
    }, [visible])
    useEffect(()=>{
        setTopp(px2rem(parseInt(ref.current?.clientHeight?ref.current?.clientHeight:0)))
        setTop(px2rem(parseInt(ref.current?.clientHeight?ref.current?.clientHeight:0) + parseInt(reff.current?.clientHeight?reff.current?.clientHeight:0)/2 - 15))
    },[show])
    return <div className='toolTips-outter'   
                style={{cursor:'pointer'}}           
                onMouseLeave={(e)=>{
                    e.stopPropagation()
                    setVisible('fadeOut')
                }} 
            >
        <div className={`toolTips animated faster ${visible} ${show}`}  style={{top:topVall}}>
            <div className='content' onClick={(e)=>e.stopPropagation()} ref={reff} style={{top:topVal}}>
                <div onClick={(e)=>e.stopPropagation()}>
                    {content}
                </div>
            </div>
            <div className='arrow'>

            </div>
        </div>
        <div className='toolTips-body' style={{cursor:'pointer'}} 
            ref={ref}
            onMouseEnter={(e)=>{
                e.stopPropagation()
                setVisible('fadeIn')
            }}
        >
            <span>{content}</span>
        </div>
    </div>
}

export default Tooltips